<template>
    <view class="gy-title-bar">
        <view class="gy-title-bar-left">
            <slot>
				<com-image v-if="props.icon && !props.icon.startsWith('gy_icon_')" :src="props.icon" mode="" :width="32" :height="32" />
				<com-icon v-if="props.icon && props.icon.startsWith('gy_icon_') && props.isShowTitle" :name="props.icon" color="#07BF66" />
				<text v-if="props.isShowTitle">{{ props.name }}</text>
				<text v-if="props.subName" class="sub-name">{{ props.subName }}</text>
			</slot>
        </view>
        <view class="gy-title-bar-right">
            <slot name="right">
            	<view v-if="props.showMore" class="gy-title-bar-more" @click="emits('more')">
            		<text>{{ props.showMoreText }}</text>
            		<com-icon name="gy_icon_arrowRight" :size="24" />
            	</view>
            </slot>
        </view>
    </view>
</template>

<script lang="ts" setup>
    import {
    	ref,
    	computed,
    	onMounted
    } from "vue";

    const emits = defineEmits(["more"]);

    const props = defineProps({
    	name: {
            type: String,
            default: "标题栏"
        },
        subName: {
            type: String
        },
        icon: {
            type: String,
            default: "gy_icon_title"
        },
        showMore: {
        	type: Boolean,
        	default: false
        },
		isShowTitle: {
			type: Boolean,
			default: true
		},
        showMoreText: {
        	type: String,
        	default: "查看更多"
        }
    });

</script>

<script lang="ts">
	export default {
		options: {
			multipleSlots: true,
			styleIsolation: 'shared',
			addGlobalClass: true,
			virtualHost: true
		}
	}
</script>

<style lang="scss" scoped>
	.gy-title-bar{
	    height: 100rpx;
	    @include flex-between-center;
	    padding: 0 var(--gy-gap);
	    .gy-title-bar-left{
	        flex: 1;
	        @include flex-start-center;
	        color: var(--gy-text-color-primary);
	        font-size: var(--gy-font-size-medium);
	        font-weight: bold;
	        @include text-ellipsis(1);
	        :deep(.gy-icon){
	            margin-right: 5rpx;
	        }
			:deep(.gy-image){
				display: inline-block;
			}
	        .sub-name{
	            color: var(--gy-color-primary);
	            font-size: var(--gy-font-size-small);
	            font-weight: 400;
	        }
	    }
	    .gy-title-bar-right{
	        max-width: 50%;
	        .gy-title-bar-more{
	            height: 60rpx;
	            @include flex-end-center;
	            padding-left: 10rpx;
	            border-radius: var(--gy-border-radius-medium);
	            text {
	                font-size: var(--gy-font-size-base);
	                padding-bottom: 3rpx;
	            }
				:deep(.gy-icon){
					display: block;
				    margin-left: 5rpx;
				}
	        }
	    }
	}
</style>
